import React, { JSX } from 'react';
import { NulCommonOperations, NulDialog, NulFormItem } from '../../components/NulDialog';
import { TextField } from '@mui/material';

interface ResetPasswordDialogProps {
  open: boolean;
  onClose: () => void;
}

function ResetPasswordDialog(props: ResetPasswordDialogProps): JSX.Element {
  const { open, onClose } = props;

  const [password, setPassword] = React.useState<string>('');

  const clear = () => {
    setPassword('');
  }

  const onResetClicked = () => {
    clear();
    onClose();
  };

  return (
    <NulDialog
      open={open}
      onClose={onClose}
      title='Reset Password'
      operations={
        <NulCommonOperations
          onPositiveClicked={onResetClicked}
          onNegativeClicked={onClose}
        />
      }
    >
      <NulFormItem hint='Password' component={
        <TextField placeholder='Password' fullWidth={true} size='small' type='password' value={password} onChange={(event) => { setPassword(event.target.value); }} />
      } />
    </NulDialog>
  );
}

export default ResetPasswordDialog;